<template>
    <a-input v-if="showSearch && !readonly" style="margin-top: 10px;margin-bottom: 10px;" v-model:value="searchAddress" :placeholder="i18n('enterAddress','请输入地址来直接查找相关位置')"></a-input>
    <baidu-map
        class="bm-view"
        :ak="mapConfig.ak"
        :v="mapConfig.version"
        :center="mapConfig.center"
        :zoom="mapConfig.zoom"
        :scroll-wheel-zoom="mapConfig.scrollWheelZoom && !readonly"
        @ready="ready"
        @click="getLocationPoint"
    >
        <bm-local-search :keyword="searchAddress" :auto-viewport="true" style="display: none"></bm-local-search>
        <bm-marker :position="{lng: location.lng, lat: location.lat}" :dragging="true" @click="infoWindowOpen">
            <bm-info-window :show="showInfo" @close="infoWindowClose" @open="infoWindowOpen">{{address}}</bm-info-window>
        </bm-marker>
    </baidu-map>
</template>

<script>
/**
 * baidu地图
 * https://map.heifahaizei.com/doc/baidu-map.html
 */

import { BaiduMap,BmMarker,BmLocalSearch,BmInfoWindow } from 'vue-baidu-map-3x';

export default {
    name: "baidu-map-view",
    emits:["ready","update:modelValue","valueChange","click"],
    components: {BaiduMap,BmMarker,BmLocalSearch,BmInfoWindow},
    props: {
        //控件值
        modelValue:{},
        //配置
        config:{},
        //是否搜索
        showSearch: {
            type:Boolean,
            default: true
        },
        //是否只读
        readonly: {
            type:Boolean,
            default: false
        },
    },
    data() {
        return {
            mapConfig:{},
            location:{},
            address:"",
            showInfo:false,
            //地图返回值 "{longitude:经度,latitude:维度,address:'详细地址'}"
            mapValue:"",
            //搜索地址
            searchAddress:""
        }
    },
    created() {
        this.mapConfig=this.config;
        if(this.modelValue){
            this.mapValue=this.modelValue;
            let obj = JSON.parse(this.mapValue);
            this.location.lng=obj.longitude;
            this.location.lat=obj.latitude;
            this.address=obj.address;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "mapLang", key);
        },
        //当地图所有图块完成加载时触发此事件 参数 BMap类和map实例
        ready(BMap,map){
            this.$emit("ready",BMap,map)
        },
        getLocationPoint(e) {
            if(this.readonly){
                return;
            }
            let _self =this ;
            this.location.lng = e.point.lng;
            this.location.lat = e.point.lat;
            /* 创建地址解析器的实例 */
            let geoCoder = new BMap.Geocoder();
            /* 获取位置对应的坐标 */
            geoCoder.getPoint(this.searchAddress, point => {
                this.selectedLng = point.lng;
                this.selectedLat = point.lat;
            });
            /* 利用坐标获取地址的详细信息 */
            geoCoder.getLocation(e.point, res => {
                _self.setMapValue(res);
            });
            _self.$emit("click",e);
        },
        infoWindowOpen(){
            this.showInfo=true;
        },
        infoWindowClose(){
            this.showInfo=false;
        },
        setMapValue(res){
            this.location.lng=res.point.lng;
            this.location.lat=res.point.lat;
            this.address=res.address;
            this.mapValue=JSON.stringify(
                {
                    longitude:this.location.lng,
                    latitude:this.location.lat,
                    address:this.address
                }
            )
        }
    },
    watch: {
        mapValue:function (val){
            this.$emit("update:modelValue",val);
            this.$emit('valueChange',val);
        },
    },
}
</script>

<style scoped>
.bm-view {
    width: 100%;
    height: 500px;
}
</style>
